<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="loginRef"
      label-position="top"
      hide-required-asterisk
    >
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="form.phone"
          placeholder="请输入手机号"
          prefix-icon="el-icon-mobile"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
          prefix-icon="el-icon-key"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
import { doLogin } from "@/api/request";
import md5 from 'js-md5';
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
        if (!reg.test(this.form.phone)) {
          callback(new Error("手机号格式错误"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      form: { phone: "", password: "", md5_password: "" },
      rules: {
        phone: [{ validator: checkPhone, trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods:{
    doLogin(){
      this.$refs.loginRef.validate(async (valid) => {
        if(!valid) return this.$message.error('请输入正确的信息');
        this.form.md5_password = md5(this.form.password);
        const {data:res} = await doLogin(this.form);
        if(res.code !== 200) return this.$message.error('登录失败');
        this.$message.success('登录成功');
        this.$router.push('/discover/personalrecom');
      })
    }
  }
};
</script>
  
  <style lang="less" scoped>
/deep/.el-input__inner {
  background-color: #fff;
  color: #000;
}
/deep/.el-input__icon {
  color: #000;
}
</style>